// 封装一个toast插件

import Toast from './Toast.vue'
const obj = {
  // 这里在使用Vue.use()的时候会默认调用install方法,并默认传入参数Vue
  install (Vue) {
    // 1.创建组件构造器(Vue.extend()本质是返回一个VueComponent构造函数)
    const toastConstructor = Vue.extend(Toast)
    // 2.由组件构造器创建一个对象实例
    // eslint-disable-next-line new-cap
    const toast = new toastConstructor()
    // 3.创建一个div，并将其添加到页面中
    let div = document.createElement('div')
    document.body.appendChild(div)
    // 4.将div挂载为模板容器，$mount()就是挂载模板容器，和vue实例中.$mount('#app')
    //  是一样的；但是toast.vue中存在 < template />,开发时依赖的vue-template-compiler
    //  会将其解析为render函数然后将.$mount('div')这个容器替换掉，所以创建的这个div最终
    //  会被代替掉
    toast.$mount(div)

    // 上面的步骤其实就是手动将组件放入到页面中加载

    // 将$toast添加为原型方法，这样每个组件都能使用里面的方法了
    Vue.prototype.$toast = toast
  }
}
export default obj

// 然后到main.js中引用该插件
